<template>

    <div>
        <!-- Header -->
        <div class="p-2 flex justify-end items-center">
            <editor-history class="mr-4"></editor-history>
            <editor-save></editor-save>
        </div>
        <!-- Body -->
        <div class="flex" style="height: calc(100vh - 64px)">
            <editor-sidebar />
            <editor-templ />
            <div id="workspace">
                <div class="relative">
                    <div class="inside-shadow"></div>
                    <canvas id="canvas" class="design-stage-grid"></canvas>
                     <el-icon size="40" class="cursor-pointer">
                        <el-icon-zoom-in />
                        <el-icon-zoom-out />

                     </el-icon>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup>
useSeoMeta({
    title: '智能在线编辑器',
})
definePageMeta({ layout: false })
const APIHOST = "https://www.kuaitu.cc"
// 功能组件
//import { fabric } from 'fabric';
// import Editor, {
//   DringPlugin,
//   AlignGuidLinePlugin,
//   ControlsPlugin,
//   // ControlsRotatePlugin,
//   CenterAlignPlugin,
//   LayerPlugin,
//   CopyPlugin,
//   MoveHotKeyPlugin,
//   DeleteHotKeyPlugin,
//   GroupPlugin,
//   DrawLinePlugin,
//   GroupTextEditorPlugin,
//   GroupAlignPlugin,
//   WorkspacePlugin,
//   HistoryPlugin,
//   FlipPlugin,
//   RulerPlugin,
//   MaterialPlugin,
//   WaterMarkPlugin,
//   FontPlugin,
//   PolygonModifyPlugin,
//   DrawPolygonPlugin,
//   FreeDrawPlugin,
//   PathTextPlugin,
//   PsdPlugin,
// } from '@kuaitu/core';
// // 创建编辑器
// const canvasEditor = new Editor();
// onMounted(()=>{
//       // 初始化fabric
//   const canvas = new fabric.Canvas('canvas', {
//     fireRightClick: true, // 启用右键，button的数字为3
//     stopContextMenu: true, // 禁止默认右键菜单
//     controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
//     imageSmoothingEnabled: false, // 解决文字导出后不清晰问题
//     preserveObjectStacking: true, // 当选择画布中的对象时，让对象不在顶层。
//   });

//   // 初始化编辑器
//   canvasEditor.init(canvas);
//   canvasEditor.use(DringPlugin);
//   canvasEditor.use(PolygonModifyPlugin);
//   canvasEditor.use(AlignGuidLinePlugin);
//   canvasEditor.use(ControlsPlugin);
//   // canvasEditor.use(ControlsRotatePlugin);
//   canvasEditor.use(CenterAlignPlugin);
//   canvasEditor.use(LayerPlugin);
//   canvasEditor.use(CopyPlugin);
//   canvasEditor.use(MoveHotKeyPlugin);
//   canvasEditor.use(DeleteHotKeyPlugin);
//   canvasEditor.use(GroupPlugin);
//   canvasEditor.use(DrawLinePlugin);
//   canvasEditor.use(GroupTextEditorPlugin);
//   canvasEditor.use(GroupAlignPlugin);
//   canvasEditor.use(WorkspacePlugin);
//   canvasEditor.use(HistoryPlugin);
//   canvasEditor.use(FlipPlugin);
//   canvasEditor.use(RulerPlugin);
//   canvasEditor.use(DrawPolygonPlugin);
//   canvasEditor.use(FreeDrawPlugin);
//   canvasEditor.use(PathTextPlugin);
//   canvasEditor.use(FontPlugin, {
//     repoSrc: APIHOST,
//   });
//   canvasEditor.use(MaterialPlugin, {
//     repoSrc: APIHOST,
//   });
//   canvasEditor.use(WaterMarkPlugin);
//   canvasEditor.use(PsdPlugin);
// })
// onUnmounted(() => canvasEditor.destory());

// provide('canvasEditor',canvasEditor)
</script>
<style scoped>
#workspace {
  flex: 1;
  width: 100%; 
  position: relative; 
  background: #f1f1f1;
  overflow: hidden;
}
#canvas {
  /* width: 300px; */
  height: 694px;
  margin: 0 auto;
}
.inside-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 9px 2px #0000001f;
  z-index: 2;
  pointer-events: none;
}
.design-stage-grid {
    --offsetX: 0px;
    --offsetY: 0px;
    --size: 16px;
    --color: #dedcdc;
    background-image: linear-gradient(45deg,
            var(--color) 25%,
            transparent 0,
            transparent 75%,
            var(--color) 0),
        linear-gradient(45deg, var(--color) 25%, transparent 0, transparent 75%, var(--color) 0);
    background-position: var(--offsetX) var(--offsetY),
        calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY));
    background-size: calc(var(--size) * 2) calc(var(--size) * 2);
}
</style>